<template lang="pug">
.welfare-model(v-if="data")
  .share-bg(v-if="mask", @click="mask = false")
    img(src='static/images/share-mark.png')
  el-dialog(
    width="320px",
    title="抢到红包",
    :visible.sync="showModal",
    :before-close="beforeCloseHandler")
    .top.tac
      a.icon(:href="data.linkurl")
        img(:src="baseUrl + data.logo")
      p.text {{data.totalmoney ? '恭喜你' : '很遗憾'}}
      p.text {{data.totalmoney ? '抢到红包 '+ data.totalmoney +' 元' : '红包已经领过了'}}

      p.btn.tac(@click="showDesc") 查看活动规则

    .bottom.tac
      el-button(type="primary", size="mini", @click="showRecord") 领取记录
      //- el-button(type="warning", size="mini", @click="withdraw") 提现
      el-button(type="success", size="mini", @click="showShare") 我要分享
</template>

<script>
import modalMixin from '@/mixins/modal'
import { Dialog } from 'vant'
export default {
  name: 'welfareModal',
  mixins: [modalMixin],
  data() {
    return {
      baseUrl: $globalconfig.URLS.API,
      homeUrl: $globalconfig.URLS.HOME,
      t5Url: $globalconfig.MODULES.NEW_T5_URL_QIANDUAN,
      data: null,
      mask: false
    }
  },
  mounted() {
    this.$vgo.on('modal:welfale', data => {
      this.data = data
      this.openModal()
    })
  },
  methods: {
    showShare() {
      this.mask = true
    },
    showRecord() {
      if (this.t5Url) {
        window.location.href = `${this.t5Url}/m-person/#/RedEnvelopes`
      } else {
        window.location.href = `${this.homeUrl}m-person/#/RedEnvelopes`
      }
    },
    withdraw() {
      if (this.t5Url) {
        window.location.href = `${this.t5Url}/m-person/#/RedEnvelopes`
      } else {
        window.location.href = `${this.homeUrl}m-person/#/RedEnvelopes`
      }
    },
    showDesc() {
      let msg = this.data.description

      Dialog.alert({
        message: msg
      }).then(() => {
        // on close
      })
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/welfare.styl'

.welfare-model
  .share-bg
    width: 100%
    height: 100%
    position: absolute
    left: 0
    top: 0
    background: rgba($black, .8)
    z-index: 3000
    img
      width: 90%
      margin: 40px auto
</style>
